<template>
    <div id="box">

        <!-- 添加修改弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="500px"
                center
                append-to-body
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="项目类型" prop="typeId">
                    <el-radio-group v-model="form.typeId">
                        <el-radio
                                v-for="dict in insTypeOptions"
                                :key="dict.dictValue"
                                :label="dict.dictValue"
                                :value="dict.dictValue"
                        >{{ dict.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="检查项目名称" prop="checkItemName">
                    <el-input v-model="form.checkItemName" placeholder="请输入检查项目名称" clearable size="small" style="width: 300px"/>
                </el-form-item>
                <el-form-item label="关键字" prop="keywords">
                    <el-input v-model="form.keywords" placeholder="请输入关键字" clearable size="small" style="width: 300px"/>
                </el-form-item>
                <el-form-item label="检查项目价格" prop="unitPrice">
                    <el-input-number v-model="form.unitPrice" placeholder="请输入检查项目价格" clearable size="small" style="width: 300px"/>
                </el-form-item>
                <el-form-item label="检查项目成本" prop="cost">
                    <el-input-number v-model="form.cost" placeholder="请输入检查项目成本" clearable size="small" style="width: 300px"/>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input v-model="form.unit" placeholder="请输入项目单位" clearable size="small" style="width: 300px"/>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio
                                v-for="dict in statusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictValue"
                                :value="dict.dictValue"
                        >{{ dict.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 添加修改弹出层结束 -->

        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
            <el-form-item label="检查项目名称" prop="checkItemName">
                <el-input
                        v-model="queryParams.checkItemName"
                        placeholder="请输入检查项目名称"
                        clearable
                        size="small"
                        style="width:140px"
                />
            </el-form-item>
            <el-form-item label="关键字" prop="keywords">
                <el-input
                        v-model="queryParams.keywords"
                        placeholder="请输入关键字"
                        clearable
                        size="small"
                        style="width:140px"
                />
            </el-form-item>
            <el-form-item label="项目类型" prop="typeId">
                <el-select
                        v-model="queryParams.typeId"
                        placeholder="项目类型"
                        clearable
                        size="small"
                        style="width:140px"
                >
                    <el-option
                            v-for="dict in insTypeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                        v-model="queryParams.status"
                        placeholder="可用状态"
                        clearable
                        size="small"
                        style="width:140px"
                >
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" circle @click="queryTable"></el-button>
                <el-button type="warning" icon="el-icon-refresh" circle @click="refreshDictType"></el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->

        <!-- 表格工具按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addInsItem">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">批量删除</el-button>
            </el-col>
        </el-row>
        <!-- 表格工具按钮结束 -->

        <!-- 数据表格开始 -->
        <el-table  border :data="checkItemTableList" :ref="multipleTable"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="检查项目ID" align="center" prop="checkItemId" sortable width="120"/>
            <el-table-column label="检查项目名称" align="center" prop="checkItemName" />
            <el-table-column label="关键字" align="center" prop="keywords" />
            <el-table-column label="项目单价" align="center" prop="unitPrice" sortable/>
            <el-table-column label="项目成本" align="center" prop="cost" sortable/>
            <el-table-column label="单位" align="center" prop="unit" />
            <el-table-column label="项目类别" prop="typeId" align="center" :formatter="insTypeFormat" />
            <el-table-column label="状态" prop="status" align="center" :formatter="statusFormat" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="170" sortable/>
            <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" size="mini" @click="updCheckItem(scope.row)">修改</el-button>
                    <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->
        <!-- 分页控件开始 -->
        <el-pagination
                v-show="page.total>0"
                :current-page="page.current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->
    </div>
</template>

<script>
    export default {
        data() {
            return {

                //模糊查询的数据
                queryParams:{},
                //初始化状态数据
                statusOptions:[],
                //检查类别初始化
                insTypeOptions:[],
                // 选中数据的id数组
                ids: [],
                // 非多个禁用
                multiple: true,
                //存放表格所有数据
                checkItemTableList:[],
                //存放表中选中的数据
                multipleTable:[],
                //添加/修改表单的控值
                dialogVisible:false,
                //表单标题
                title:'',
                //表单绑定的对象
                form:{
                    unitPrice: 0,
                    cost: 0,
                    typeId: '1',
                    status: '0'
                },
                //分页数据
                page:{
                    current:1,
                    size:5,
                    total:0
                },
                //表单绑定的规则
                rules:{
                    checkItemName: [
                        { required: true, message: '检查项目名称不能为空', trigger: 'blur' }
                    ],
                    keywords: [
                        { required: true, message: '检查项目关键字不能为空', trigger: 'blur' }
                    ],
                    unitPrice: [
                        { required: true, message: '检查项目单价不能为空', trigger: 'blur' }
                    ],
                    cost: [
                        { required: true, message: '检查项目成本不能为空', trigger: 'blur' }
                    ],
                    unit: [
                        { required: true, message: '检查项目单位不能为空', trigger: 'blur' }
                    ]
                },

            }
        },
        created() {
            this.initTable();
            this.initStatus()
            this.initInsType();
        },
        methods: {
            /* 表格外按钮点击事件 */
            queryTable(){    //模糊查询按钮触发
                this.page.current=1;
                this.initTable();
            },
            refreshDictType(){  //重置模糊查询按钮触发
                this.queryParams={};
                this.initTable();
            },
            addInsItem(){  //添加检查项目
                if (this.$refs.form != undefined) {
                    this.$refs.form.clearValidate();
                }
                //弹出添加/修改表单
                this.dialogVisible=true;
                this.form={
                        unitPrice: 0,
                        cost: 0,
                        typeId: '1',
                        status: '0'
                };
                this.title = '添加检查项目'
            },
            handleDelete(row){  //删除按钮触发事件
                //哪一个有值就将哪一个赋值给dictIds
                const checkItemIds = row.checkItemId || this.ids
                this.$confirm('此操作将永久删除被选中的检查项目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete(`/system/api/checkItem/deleteCheckItemByIds/${checkItemIds}`).then(result=>{
                        if (result.data.data){
                            this.$message({
                                showClose: true,
                                message: result.data.msg,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '操作失败',
                                type: 'error'
                            });
                        }
                        this.page.current=1;
                        this.initTable();
                    })
                }).catch(() => {
                    this.$message.info('删除已取消')
                })
            },

            /*表格内点击事件*/
            handleSelectionChange(selection) { // 数据表格的多选择框选择时触发
                this.ids = selection.map(item => item.checkItemId)
                //没有行被选中的时候，将批量删除按钮禁用
                this.multiple = !selection.length
            },
            updCheckItem(row){
                if (this.$refs.form != undefined) {
                    this.$refs.form.clearValidate();
                }
                this.title='修改检查项目';
                //显示弹出对话框
                this.dialogVisible = true;
                this.form.checkItemId = row.checkItemId;
                //采取深克隆的形式
                this.form = JSON.parse(JSON.stringify(row));
            },

            /* 表单事件 */
            handleSubmit(){  // 添加/修改表单确定按钮触发
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/system/api/checkItem/saveOrUpdateInsItem",this.form).then(result=>{
                            if (result.data.data){
                                this.$message({
                                    showClose: true,
                                    message: result.data.msg,
                                    type: 'success'
                                });
                            }else {
                                this.$message({
                                    showClose: true,
                                    message: '操作失败',
                                    type: 'error'
                                });
                            }
                            // 关闭弹出对话框
                            this.dialogVisible = false;
                            this.title='';
                            //表格回溯到第一页
                            this.page.current=1;
                            // 刷新表格数据
                            this.initTable();
                        })
                    }
                })
            },
            cancel(){     //添加修改表单取消按钮触发
                this.dialogVisible=false;
                this.title = '';
            },


            /*初始化数据*/
            initTable(){  //查询表格中数据
                this.$http.post("/system/api/checkItem/selectAll/"+this.page.current+"/"+this.page.size,this.queryParams).then(result=>{
                    this.checkItemTableList = result.data.data.records;
                    this.page.total = result.data.data.total;
                })
            },
            initStatus(){   //初始化状态字典
                this.$http.get("/system/api/dict/data/findByType/sys_normal_disable").then(result=>{
                    this.statusOptions = result.data.data;
                })
            },
            statusFormat(row){  //状态字典解析
                let v = row.status;
                return this.formatDict2(this.statusOptions,v);
            },
            initInsType(){   //初始化登录类型字典
                this.$http.get("/system/api/dict/data/findByType/his_inspection_type").then(result=>{
                    this.insTypeOptions = result.data.data;
                })
            },
            insTypeFormat(row){  //登录类型字典解析
                let v = row.typeId;
                return this.formatDict2(this.insTypeOptions,v);
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.page.size = val
                // 重新查询
                this.initTable()
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.page.current = val
                // 重新查询
                this.initTable()
            },
        },
    }
</script>
<style>
  #box{
    margin: 15px;
  }
</style>
